<template>
<!-- 这是教育经历页面 -->
    <div id="EducationalExperience">
      <div class="Header-wrapper">
            <yd-navbar title="填写教育经历" fontsize="16px" color="#fff" height="45px" bgcolor="#ffd602">
               <div slot="left" @click="golink">
                    <i class="iconfont icon-back Fcolor" ></i>
                </div>
                <div class="release-right" slot="right" @click="save">保存</div>
            </yd-navbar>
        </div>
      <div class="EducationalExperience-box-list">
          <ul>
              <li>
             <yd-cell-group>
                <yd-cell-item>
                  <span slot="left"> <i>*</i> 学校</span>
                  <yd-input slot="right" required :show-required-icon='false' :show-clear-icon="true" :show-success-icon='false' v-model="school" aceholder="请填写"></yd-input>
                </yd-cell-item>
          </yd-cell-group>
              </li>
              <li>
            <yd-cell-group>
            <yd-cell-item>
              <span slot="left"> <i>*</i> 主修专业</span>
              <yd-input slot="right" required :show-required-icon='false' :show-clear-icon="true" :show-success-icon='false' v-model="zhuanye" aceholder="请填写"></yd-input>
            </yd-cell-item>
          </yd-cell-group>
              </li>
              <li>
                <group style="width:100%; float:right;">
                    <span class="span"><i>*</i> 入学时间</span>
                    <datetime v-model="begindate" placeholder="请选择" style="font-size: 12px;"></datetime>
                </group>
             </li>
              <li>
                <group style="width:100%; float:right;">
                    <span class="span"><i>*</i> 毕业时间</span>
                    <datetime v-model="enddate" placeholder="请选择" style="font-size: 12px;"></datetime>
                </group>
              </li>
          </ul>
           <div class="EducationalExperience-box-detail">
                <p>兴趣爱好: </p>
                <p class="EducationalExperience-texert">
                    <yd-textarea v-model="goodat" slot="right" placeholder="请输入您的兴趣爱好" fontsize="12px" maxlength="200"></yd-textarea>
                </p>
            </div>
            <div class="EducationalExperience-box-foot">
                注: 需要填写打*号内容才能保存哦!
            </div>
      </div>
    </div>
</template>
<script type="text/babel">
import { Datetime, Group, Cell, Picker } from 'vux'
import apis from '../../../../../static/js/apis.js'
export default {
  data () {
    return {
      itemData: [],
      zhuanye: '',
      school: '',
      goodat: '',
      enddate: '',
      begindate: '',
      id: ''
    }
  },
  components: {
    Group,
    Picker,
    Cell,
    Datetime,
    apis
  },
  created () {
    this.id = this.$route.query.id
    // console.log(this.id)
    if (this.id !== '' && this.id !== undefined) {
      this.$axios.post(apis + '/app/school/getinfo', this.confusion(JSON.stringify({
        id: this.id + ''
      })),
      {
        headers: {
          Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
          'Content-Type': 'application/json;charset=UTF-8',
          'Cache-Control': 'no-cache',
          isApp: 'isApp'
        }
      }
      )
        .then(response => {
          this.itemData = response.data
          this.zhuanye = this.itemData.zhuanye
          this.school = this.itemData.school
          this.goodat = this.itemData.goodat
          this.enddate = this.itemData.enddate.split(' ')[0]
          this.begindate = this.itemData.begindate.split(' ')[0]
        })
        .catch(error => {
          console.log(error)
          this.$dialog.toast({
            mes: '服务器异常'
          })
        })
    }
  },
  methods: {
    save () {
      if (this.school === '' || this.school === undefined) {
        this.$dialog.toast({
          mes: '请输入学校名称'
        })
        return
      } else if (this.zhuanye === '' || this.zhuanye === undefined) {
        this.$dialog.toast({
          mes: '请输入主修专业'
        })
        return
      } else if (this.begindate === '') {
        this.$dialog.toast({
          mes: '请选择入学时间'
        })
        return
      } else if (this.enddate === '') {
        this.$dialog.toast({
          mes: '请选择毕业时间'
        })
        return
      }
      // alert(this.id)
      if ((this.id !== '') && (this.id !== undefined)) {
        this.$axios.post(
          apis + '/app/school/editschool',
          this.confusion(
            JSON.stringify({
              id: this.id,
              begindate: this.begindate,
              enddate: this.enddate,
              goodat: this.goodat,
              school: this.school,
              zhuanye: this.zhuanye
            })
          ),
          {
            headers: {
              Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
              'Content-Type': 'application/json;charset=UTF-8',
              'Cache-Control': 'no-cache',
              isApp: 'isApp'
            }
          }
        )
          .then(response => {
            this.userDate = response.data
            this.$dialog.toast({
              mes: '修改成功',
              callback: () => {
                window.history.go(-1)
              }
            }) // console.log(response)
          })
          .catch(error => {
            console.log(error)
          })
      } else {
        this.$axios.post(
          apis + '/app/school/saveschool',
          this.confusion(
            JSON.stringify({
              begindate: this.begindate,
              enddate: this.enddate,
              goodat: this.goodat,
              school: this.school,
              zhuanye: this.zhuanye
            })
          ),
          {
            headers: {
              Authorization:
                    'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
              'Content-Type': 'application/json',
              'Cache-Control': 'no-cache',
              isApp: 'isApp'
            }
          }
        )
          .then(response => {
            this.$dialog.toast({
              mes: '保存成功',
              callback: () => {
                window.history.go(-1)
              }
            })
          })
          .catch(error => {
            console.log(error)
          })
      }
    },
    golink () {
      window.history.go(-1)
    }
  }
}
</script>
<style scoped>
.release-right {
  font-size: 12px;
  color: #fff;
}
.center {
  padding-top: 10px;
  padding-left: 15px;
  color: green;
}
.icon-back {
  font-size: 24px;
}
.Fcolor {
  color: #fff;
}
.EducationalExperience-box-list {
  background: #fff;
  width: 100%;
  overflow: hidden;
}
.EducationalExperience-box-list ul li {
  display: flex;
  line-height: 50px;
  border-bottom: 1px solid #dfdfdf;
}
.EducationalExperience-texert {
  padding: 0 12px;
  border-bottom: 1px solid #dfdfdf;
  overflow: hidden;
}
i {
  color: #ff5b5b;
  margin-left: 10px;
}
input {
  margin-left: 10px;
  flex: 4;
}
span {
  display: block;
  width: 62px;
  font-size: 12px;
  text-align: left;
  height: 50px;
  color: #333;
}
.EducationalExperience-box-detail {
  width: 100%;
  border-bottom: 1px solid #dfdfdf;
}
.EducationalExperience-box-detail p:nth-of-type(1) {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-indent: 15px;
}
.EducationalExperience-box-detail p:nth-of-type(3) {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-indent: 15px;
}
.EducationalExperience-box-detail input {
  width: 100%;
  height: 150px;
  line-height: 150px;
  text-indent: 130px;
}
.EducationalExperience-box-foot {
  margin: 10px;
  color: #ff5b5b;
}
.yd-cell-item {
  padding: 0;
}
.yd-cell-box {
  margin: 0;
  width: 100%;
}
.yd-cell {
  width: 100%;
}
.yd-datetime-input {
  text-indent: 60px;
}
.span1 {
  font-size: 12px;
  color: #000;
}
.span1 i {
  margin: 0 4px;
}
.yd-cell-left {
  height: 50px;
}

.picker-buttons {
  margin: 0 15px;
}
.span {
  width: 25%;
  height: 50px;
  float: left;
  line-height: 50px;
  font-size: 12px;
  color: #000;
}
i {
  color: #ff2828;
  margin-right: 2px;
}
.vux-cell-primary {
  height: 50px;
}
.vux-cell-box {
  position: relative;
  width: 70%;
  height: 50px;
  padding: 0;
  line-height: 30px;
  float: right;
  font-size: 12px;
}
.vux-cell-primary {
  height: 32px;
}
.yd-cell-item:not(:last-child):after {
  border-bottom: none;
}

.yd-cell-box {
  margin: 0 !important;
}
</style>
